<!-- 工作台 》 班组工作台 -->

<template>
  <div class="work-bench-team">
    <div class="work-bench-team__top">
      <el-dropdown @command="handleCommand">
        <span class="work-bench-team__dropdown-link">
          {{ teams[activeTeam] }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(label, key) in teams" :key="key" :command="key">{{ label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="work-bench-team__wrapper work-bench-team__wrapper--1">
      <el-row>
        <el-col :span="6">
          <div class="work-bench-team__wrapper-2">
            <VideoMonitor
              class="work-bench-team__item work-bench-team__wrapper-2__item"
              :team-id="$route.params.type"
            />
            <SteamStatistics
              class="work-bench-team__item work-bench-team__wrapper-2__item"
              :team-id="$route.params.type"
            />
            <DosageStatistics
              class="work-bench-team__item work-bench-team__wrapper-2__item"
              :team-id="$route.params.type"
            />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="work-bench-team__wrapper-2">
            <SystemStatus
              class="work-bench-team__item work-bench-team__wrapper-2__item"
              :team-id="$route.params.type"
            />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="work-bench-team__wrapper-2">
            <AlarmInfo class="work-bench-team__item work-bench-team__wrapper-2__item" :team-id="$route.params.type" />
            <PatrolMaintenance
              class="work-bench-team__item work-bench-team__wrapper-2__item"
              :team-id="$route.params.type"
            />
            <RepairInfo class="work-bench-team__item work-bench-team__wrapper-2__item" :team-id="$route.params.type" />
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="work-bench-team__wrapper work-bench-team__wrapper--2">
      <el-row>
        <el-col :span="6">
          <div class="work-bench-team__wrapper-2">
            <EnvStatus class="work-bench-team__item work-bench-team__wrapper-2__item" :team-id="$route.params.type" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="work-bench-team__wrapper-2">
            <DeviceStatus
              class="work-bench-team__item work-bench-team__wrapper-2__item"
              :team-id="$route.params.type"
            />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="work-bench-team__wrapper-2">
            <PersonInfo class="work-bench-team__item work-bench-team__wrapper-2__item" :team-id="$route.params.type" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import state from './state'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'WorkbenchTeam',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),
  data() {
    return {
      ...state(),
    }
  },
  methods: {
    /**
     * @function 处理菜单选择
     */
    handleCommand(command) {
      this.activeTeam = command
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
